<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H5 Communication</title>
</head>
<body>
  <h1>H5 Page</h1>
  <!-- yourpage.html -->
<script type="text/javascript">
  // 检查是否在微信环境
  if (typeof wx !== 'undefined' && typeof wx.miniProgram !== 'undefined') {
    // 定义一个函数，用于从网页发送消息给小程序
    function callMiniProgramFunction(data) {
      wx.miniProgram.postMessage({ data: data });
    }

    // 示例：点击按钮时调用小程序函数
    document.getElementById('callBtn').addEventListener('click', function() {
      callMiniProgramFunction('Hello, Mini Program!');
    });
  } else {
    alert('请在微信客户端打开！');
  }
</script>

<button id="callBtn">调用小程序功能</button>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</body>
</html>